<template>
	<div class="newsongrecommend">
		<!-- 固定在顶部的内容 -->
		<div class="nav-fd">
			<div class="get-App ">
				下载App
			</div>
			<div class="serch-logo ">
				<van-icon name="search" size="0.775rem" />
			</div>
		</div>
		<!-- 歌曲内容 -->
		<div class="music-information">
			<!-- 歌名部分 -->
			<div class="music-title">
				<p class="name">
					<span class="icon">
						标准
						<van-icon name="arrow-down" />
					</span>
					<span class="song">{{infogm}}</span>
				</p>
				<p class="name">{{infogmname}}</p>
			</div>
			<!-- 歌词部分 -->
			<div class="music-lyric van-picker-gai">
				<van-picker :columns="columns"  class="van-picker__mask-gai"/>
			</div>
			<!-- 小功能部分 -->
			<div class="music-func">
				<p class="content">
					<van-icon name="like-o paing" />
					<van-icon name="chat-o paing" />
					<van-icon name="back-top" class="back-top paing" />
				</p>
			</div>
			<!-- 播放按键 -->
			<div class="music-play">
				<audio :src="singsong" controls="controls" class="palyar">
				</audio>
			</div>
			<!-- 功能广告2 -->
			<div class="music-func2 dp-fl">
				<div class=" public-frame">高品质下载</div>
				<div class=" public-frame">手机铃声设置</div>
			</div>
		</div>
		<!-- 所属专辑 -->
		<div class="album">
			<div class="title">
				所属专辑
			</div>
			<van-divider />
			<div class="content-a">
				<div class="fl-le title-img">
					<img :src="img1" >
				</div>
				<div class="fl-le title-font">
					<p>{{infogm}}<span>{{math1}}</span></p>
					<p>{{time}}</p>
				</div>
				<div class="fl-ri title-icn">
					<van-icon name="arrow" />
				</div>
			</div>
			<van-divider />
			<div class="song-sheet">
				<div class="fl-le title-font">
					<p>{{infogm}}</p>
					<p>{{infogmname}}</p>
				</div>
				<div class="fl-ri title-icn">
					<van-icon name="back-top" />
				</div>
			</div>
		</div>
		<!-- 所属歌手 -->
		<div class="singer">
			<div class="title">
				所属歌手
			</div>
			<van-divider />
			<div class="content-a">
				<div class="fl-le title-img">
					<img :src="img2" >
				</div>
				<div class="fl-le title-font">
					<p>{{infogmname}}</p>
				</div>
				<div class="fl-ri title-icn">
					<van-icon name="arrow" />
				</div>
			</div>
			
		</div>
		<!-- 结尾 -->
		<div class="footer">
			<div class="img">
				<img :src="img4">
			</div>
			<div class="font">打开APP，找到更好听的哥</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				math1:'(1首)',
				time:'2020-10-23',
				infogm:'Moma',
				infogmname:'BowAsWell',
				columns: ['*该歌词暂不支持自动滚动*',
				'02 Moma',
				'Wear up my shoulder',
				'安装我的肩臂',
				'Tweaking my body',
				'调试我的身体',
				'Close up to my head',
				'靠近我的源头',
				'Im drifting away',
				'再游离于此',
				'Wear up my shoulder',
				'安装我的肩臂',
				'Tweaking my body',
				'调试我的身体',
				'Close up to my head',
				'靠近我的源头',
				'Im drifting away',
				'再游离于此',
				'Im drifting away',
				'再游离于此',
				'词曲、编曲、演奏、制作、缩混：张一弛',
				'Written, Played, Produced, Mixed by Yichi Zhang',
				'录音：弓也工作室，北京',
				'Recorded at KungYe Studio (Beijing)',
				'母带处理：Jake Viator (Stones Throw Studios，洛杉矶)',
				'Mastered by Jake Viator at Stones Throw Studios (LA)',
				
				],
				singsong:require('../assets/music/张韶涵-梦里花.mp3'),
				img1:require('../assets/songerimg/ChAKEV-SeWGAPA1EAAsHjUOwQ3M039.jpg'),
				img2:require('../assets/songerimg/ChAKEV-WRgWAdax7AAcDisaNacA775.jpg'),
				
				img4:require('../assets/homepage1/99e28d0.png'),
			}
		},
	}
</script>

<style scoped>
*{
	box-sizing: border-box;
}
.newsongrecommend{
	background-color: #eee;
}
	/* 固定在顶部的内容开始 */
.dp-fl{
	display: flex;
	justify-content: center;
}
.fl-le{
	float: left;
}
.fl-ri{
	float: right;
}
.nav-fd{
	position: fixed!important;
	background: url(../assets/homepage1/df8724c.jpg) no-repeat;
	width: 100%;
	height: 21.74vw;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	z-index: 200;
	border-bottom: .5px solid #e0e0e0;
}
.get-App{
	padding: 0.2rem 0.175rem;
	width: 1.7rem;
	text-align: center;
	background: #e61723;
	color: #fafafa;
	font-style: normal;
}
.serch-logo{
	padding: .65rem;
}
.pd-le{
	padding-left: 0.625rem;
}
/* 固定在头部的内容结束 */
/* 歌名内容 */
.music-information{
	padding-top: 2.5rem;
	padding-left: .25rem;
	padding-right: .25rem;
	background: #f8f8f8;
}
.music-title{
	width: 100%;
}
.music-title .name{
	padding-bottom:0.1rem ;
	text-align: center;
	font-weight: 100;
	font-size: 0.25rem;
}
.music-title .name .icon{
	border: 1px solid #000000;
	padding: 0.0625rem 0.125rem;
	border-radius: 0.15rem;
	zoom: .7;
	font-weight: 700;
	font-size: .3rem;
}
.music-title .name .song{
	font-size: .45rem;
	font-weight: 700;
}
/* 歌词部分 */
.van-picker__mask{
	background-image: none !important;
}
.van-picker{
	background-color: #f8f8f8!important;
	opacity: .5;
	font-size: 0.3125rem;
}
.van-ellipsis{
	font-size: .4rem;
}
/* 功能部件 */
.music-func{
	width: 100%;
	height: 1.5rem;
	line-height: 1.5rem;
}
.music-func .content{
	text-align: center;
	zoom: 2;
}
.music-func .content .paing{
	padding: 0 .45rem;
	opacity: .6;
}
.music-func .content .back-top{
	transform: rotate(180deg);
}
/* 播放按键 */
.music-play{
	width: 100%;
}
.palyar{
	width: 100%;
	border: none;
	
}
.music-func2{
	width: 100%;
	height: 1.75rem;
	align-items: center;
}
.public-frame{
	width: 3.25rem;
	height: .95rem;
	background: #e13228;
	border-radius: 0.625rem;
	color: white;
	text-align: center;
	line-height: .95rem;
	margin: .25rem;
}
/* 所属专辑 */
.album{
	width: 100%;
	padding: .5rem .5rem;
	background: #f8f8f8;
	margin-top: 0.225rem;
}
.album .title{
	width: 100%;
	height: 1rem;
	font-size: .55rem;
}
.album .content-a{
	width: 100%;
	height: 2rem;
}
.album .content-a .title-img img{
	width: 1.75rem;
	height: 1.75rem;
}
.album .content-a .title-font{
	padding-left: 0.425rem;
}
.album .content-a .title-font p:nth-child(1){
	font-size: .45rem;
	padding-top: .35rem;
}
.album .content-a .title-font p:nth-child(2){
	opacity: .5;
}
.album .content-a .title-font p span{
	font-size: 0.0625rem;
}
.album .content-a .title-icn{
	height: 1.75rem;
	line-height: 1.75rem;
	zoom: 1.3;
}
.album .song-sheet{
	width: 100%;
	height: 2rem;
}
.album .song-sheet .title-font{
	height: 2rem;
}
.album .song-sheet .title-font p:nth-child(1){
	font-size: .45rem;
	padding-top: .35rem;
}
.album .song-sheet .title-font p:nth-child(2){
	opacity: .5;
}
.album .song-sheet .title-icn{
	height: 1rem;
	line-height: 1rem;
	transform: rotate(180deg);
	zoom: 1.6;
	opacity: .5;
}
.singer{
	width: 100%;
	padding: .5rem .5rem;
	background: #f8f8f8;
	margin-top: 0.225rem;
}
.singer .title{
	width: 100%;
	height: 1rem;
	font-size: .55rem;
}
.singer .content-a{
	width: 100%;
	height: 1.25rem;
}
.singer .content-a .title-img{
	width: 1.25rem;
}
.singer .content-a .title-img img{
	width: 100%;
	border-radius: 50%;
}
.singer .content-a .title-font{
	height: 1.25rem;
	line-height: 1.25rem;
	padding-left: .25rem;
}
.singer .song-sheet .title-font p{
	font-size: .45rem;
	padding-top: .35rem;
}
.singer .content-a .title-icn{
	height: 1.25rem;
	line-height: 1.25rem;
	zoom: 1.3;
}
/* 其他专辑模块 */
.album-module{
	display: flex;
	align-items: center;
	flex-direction: column;
	padding-right: .25rem;
}
.album-module .module-img{
	width: 100%;
}
.album-module .module-img img{
	width: 100%;
}
.album-module .name{
	font-weight: 700;
}
.album-module .time{
	font-size: 0.15rem;
	opacity: .8;
}
.footer{
	width: 100%;
	padding: 50px 0;
	/* height: 3.5rem; */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: white;
	margin-top: 0.225rem;
}
.footer .img img{
	width: 3rem;
}
.footer .font{
	width: 5.25rem;
	height: 1rem;
	background-color: #E13228;
	color: white;
	border-radius: 2.125rem;
	text-align: center;
	line-height: 1rem;
	margin-top: .225rem;
}
</style>
